import { ConfigEnv, UserConfig, defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import path from 'path'
import tailwindcss from '@tailwindcss/vite'
import { viteMockServe } from 'vite-plugin-mock'
import forkEnv from './scripts/vite-plugin-fork-env'
import { createProxy } from './build/proxy'
import { wrapperEnv } from './build/getEnv'
import { visualizer } from 'rollup-plugin-visualizer'
import { babel } from '@rollup/plugin-babel'

const NODE_ENV = process.env.NODE_ENV

export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
  const root = process.cwd()
  const env = loadEnv(mode, root)
  const viteEnv = wrapperEnv(env)
  return {
    plugins: [
      vue(),
      vueJsx(),
      tailwindcss(),
      forkEnv(), // dis打包config.js
      // 配置mock
      viteMockServe({
        // 模拟数据文件存放的路径，默认为 ‘./mock',根据实际存放的地址配置
        mockPath: './src/mock',
        enable: command === 'serve' // 只有开发环境才开启mock
      }),
      visualizer({
        emitFile: false,
        filename: 'stats.html',
        open: true, //  true 打包完自动打开分析页面，false 不会自动弹出
        sourcemap: true,
        gzipSize: true // 是否统计并显示gzip
      }),
      // 为啥引入这个babel我还没有很深刻的体会，先加上把
      babel({
        include: [/\.js$/, /\.vue$/], // 只转换 JS 和 Vue 文件中的代码
        exclude: /node_modules/, // 排除 node_modules 目录
        presets: ['@babel/preset-env'] // 使用 @babel/preset-env
      })
    ],
    server: {
      host: '0.0.0.0',
      port: viteEnv.VITE_PORT,
      open: viteEnv.VITE_OPEN, // 自动打开浏览器
      cors: true,
      // Load proxy configuration from .env.development
      proxy: createProxy(viteEnv.VITE_PROXY) // 还有这个createProxy和viteEnv两个方法的实现也都还不太理解
    },
    resolve: {
      alias: {
        // 如果报错__dirname找不到，需要安装node,执行yarn add @types/node --save-dev
        '@': path.resolve(__dirname, 'src'),
        comps: path.resolve(__dirname, 'src/components')
      }
    },
    css: {
      // 覆写element的css样式
      preprocessorOptions: {
        scss: {
          additionalData: '@use "@/assets/style/cover.scss" as *;'
        }
      }
    },
    build: {
      outDir: 'dist',
      minify: 'esbuild', // minify压缩选项--设置使用的压缩工具，两种esbuild和terser
      // minify: "terser",
      // terserOptions: {
      //   compress: {
      //     // 生产环境时移除console
      //     drop_console: true,
      //     drop_debugger: true,
      //   },
      // },
      chunkSizeWarningLimit: 1500, // 规定触发警告的 chunk 大小
      rollupOptions: {
        output: {
          chunkFileNames: 'assets/js/[name]-[hash].js',
          entryFileNames: 'assets/js/[name]-[hash].js',
          assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
          sourcemap: true,
          manualChunks(id) {
            if (id.includes('node_modules')) {
              return id.toString().split('node_modules/')[1].split('/')[0].toString()
            }
          }
        }
      }
    },
    // 当build中 minify: 'esbuild' 时，可以用下面代码来配置压缩代码时去掉console和debugger
    esbuild: {
      drop: NODE_ENV === 'production' ? ['console', 'debugger'] : []
    }
  }
})
